<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        html,body{
            background: white;
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .title-block {
            width: 3.43rem;
            min-height: 0.44rem;
            background-color: #F8E9E4;
            justify-content: center;
            align-items: center;
        }
        .not-active {
            display: none;
        }
        .cloud-left {
            width: 0.50rem;
            height: 0.12rem;
            background-size: 0.50rem 0.12rem;
            background-image: url("../../image/tools/cloud-left.png");
            margin-left: 0.15rem;
            margin-right: 0.10rem;
        }
        .cloud-right {
            width: 0.50rem;
            height: 0.12rem;
            background-size: 0.50rem 0.12rem;
            background-image: url("../../image/tools/cloud-right.png");
            margin-right: 0.15rem;
            margin-left: 0.10rem;
        }
        .cell-head {
            height: 0.40rem;
            background-color: #71381A;
            font-size: 0.14rem;
            color: white;
            font-weight: 600;
            line-height: 0.40rem;
            text-align: center;
        }
        .cells {
            height: 0.40rem;
            background-color: #F8E9E4;
            border-left-width: 0.01rem;
            border-style: solid;
            border-color: rgba(161,99,69,0.25);
            font-size: 0.14rem;
            color: #231313;
            line-height: 0.40rem;
            text-align: center;
        }
        .title-block {
            white-space:wrap;
            /*text-overflow:ellipsis;*/
            /*overflow:hidden;*/
            /*display: -webkit-box;*/
            /*-webkit-box-orient: vertical;*/
            /*word-break:break-all;*/
            /*-webkit-line-clamp: 1; !* 控制显示的行数 *!*/
        }
        .yinyang {
            width: 3.75rem;
            height: 0.32rem;
            background-size: 3.75rem 0.32rem;
            background-image: url(../../image/tools/yinyang.png);
        }
        .block {
            background-size: 3.43rem 1.33rem;
            background-image: url(../../image/inquiry/block-background.png);
            background-repeat: no-repeat;
            background-position: center bottom;
        }
    </style>
</head>
<body>
<div>
    <div class="flex" style="width: 100%; height: 1.91rem; background-color: white; flex-wrap: wrap; justify-content: center; align-content: flex-start;">
        <div style="width: 100%; height: 0.30rem"></div>
        <p style="width: 100%; font-size: 0.20rem; line-height: 0.28rem; color: #231313; font-weight: 600; text-align: center;">生辰八字</p>
        <div style="border-style: solid; border-width: 0.01rem; border-color: #D0D0D0; width: 3.42rem; height: 0.81rem; margin-top: 0.30rem">
            <div class="flex" style="width: 3.42rem; border-style: solid; border-bottom-width: 0.01rem; border-color: #D0D0D0;">
                <div class="cell-head" style="width: 0.70rem">公历</div>
                <div class="cells" id="gregorcan-birth-year" style="width: 0.80rem"></div>
                <div class="cells" id="gregorcan-birth-month" style="width: 0.64rem"></div>
                <div class="cells" id="gregorcan-birth-day" style="width: 0.64rem"></div>
                <div class="cells" id="gregorcan-birth-hour" style="width: 0.64rem"></div>
            </div>
            <div class="flex" style="width: 3.42rem;">
                <div class="cell-head" style="width: 0.70rem">阴历</div>
                <div class="cells" id="lunar-birth-year" style="width: 0.80rem"></div>
                <div class="cells" id="lunar-birth-month" style="width: 0.64rem"></div>
                <div class="cells" id="lunar-birth-day" style="width: 0.64rem"></div>
                <div class="cells" id="lunar-birth-hour" style="width: 0.64rem"></div>
            </div>
        </div>
    </div>

    <div class="yinyang" style="margin-bottom: 0.05rem;"></div>

    <div id="detail"></div>
</div>
</body>
</html>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<!--<script type="text/javascript" src="../script/common/echarts/echarts.min.js"></script>-->
<script type="text/javascript">
    var gregorcanBirthYearEl, gregorcanBirthMonthEl, gregorcanBirthDayEl, gregorcanBirthHourEl, lunarBirthYearEl, lunarBirthMonthEl, lunarBirthDayEl, lunarBirthHourEl;
    var detailEl;
    var fortuneTelling = [];
    apiready = function () {
        gregorcanBirthYearEl = $api.byId("gregorcan-birth-year");
        gregorcanBirthMonthEl = $api.byId("gregorcan-birth-month");
        gregorcanBirthDayEl = $api.byId("gregorcan-birth-day");
        gregorcanBirthHourEl = $api.byId("gregorcan-birth-hour");
        lunarBirthYearEl = $api.byId("lunar-birth-year");
        lunarBirthMonthEl = $api.byId("lunar-birth-month");
        lunarBirthDayEl = $api.byId("lunar-birth-day");
        lunarBirthHourEl = $api.byId("lunar-birth-hour");

        detailEl = $api.byId("detail");

        getFortuneTelling();

        api.setRefreshHeaderInfo({
            bgColor: 'rgba(255, 255, 255, 0)',
            textColor: '#000000',
            textDown: '下拉可以刷新',
            textUp: '松开立即刷新',
            textLoading: '正在刷新数据中',
            textTime: '最后更新'
        }, function(ret, err) {
            window.location.reload();
            api.refreshHeaderLoadDone();
        });
    }

    function getFortuneTelling() {
        // api.openFrame({
        //     name: 'loadingPage',
        //     url: './loadingPage.html',
        //     slidBackEnabled: false,
        //     bgColor: "rgba(0,0,0,0)",
        //     pageParam: {
        //         msg: "test",
        //     },
        //     animation: {
        //         type: 'none',
        //         duration: 0
        //     }
        // });
        var temApiHeader = {
            "Content-Type": "application/json",
        };
        api.ajax({
            url: apiUrl + '/tools/fortune-telling',
            tag: '/tools/fortune-telling',
            method: 'post',
            headers: temApiHeader,
            data: {
                body: {
                    token: $api.getStorage("token"),
                    family_name: api.pageParam.family_name,
                    given_name: api.pageParam.given_name,
                    sex: api.pageParam.sex,
                    birthday: api.pageParam.birthday,
                    // birth_year: api.pageParam.birth_year,
                    // birth_month: api.pageParam.birth_month,
                    // birth_day: api.pageParam.birth_day,
                    // birth_hour: api.pageParam.birth_hour,
                    // birth_minute: api.pageParam.birth_minute,
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    $api.text(gregorcanBirthYearEl, ret.data.birth.gregorcan.birth_year + "年");
                    $api.text(gregorcanBirthMonthEl, ret.data.birth.gregorcan.birth_month + "月");
                    $api.text(gregorcanBirthDayEl, ret.data.birth.gregorcan.birth_day + "日");
                    $api.text(gregorcanBirthHourEl, ret.data.birth.gregorcan.birth_hour + "点");

                    $api.text(lunarBirthYearEl, ret.data.birth.lunar.birth_year + "年");
                    $api.text(lunarBirthMonthEl, ret.data.birth.lunar.birth_month);
                    $api.text(lunarBirthDayEl, ret.data.birth.lunar.birth_day);
                    $api.text(lunarBirthHourEl, ret.data.birth.lunar.birth_hour);

                    var detailArray = ret.data.detail;
                    for (var i=0,len=detailArray.length; i<len; i++)
                    {
                        $api.append(detailEl,
                        '<div class="flex" style="width: 100%; height: auto; justify-content: center; margin-top: 0.20rem;">' +
                            '<div style="width: 3.43rem; border-radius: 0.055rem; overflow: hidden; background-color: #FDFDFD;">' +
                                '<div class="flex title-block">' +
                                    '<div class="cloud-left"></div>' +
                                    '<p style="font-size: 0.20rem; color:#643432; font-weight: 600; text-align: center; max-width: 1.90rem;">' + detailArray[i]["name"] + '</p>' +
                                    '<div class="cloud-right"></div>' +
                                '</div>' +
                                '<div class="block" style="padding: 0.27rem 0.21rem 0.17rem 0.21rem;">' +
                                    '<p id="today-tips" style="color: #643332">' + detailArray[i]["content"] + '</p>' +
                                '</div>' +
                            '</div>' +
                        '</div>');
                    }
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
                api.closeFrame({
                    name: 'loadingPage'
                });
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }
</script>
